<template>
  <div class="app-multiple-select">
    <van-checkbox-group v-model="curValue">
      <van-checkbox shape="square"  :name="item.value" v-for="item in options" :key="item.id">{{ item.text }}</van-checkbox>
    </van-checkbox-group>
  </div>
</template>



<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";

@Component({
  components: {}
})
export default class AppMultipleSelect extends Vue {
 
  /**
   * 下拉数据数组
   *
   * @type {any[]}
   * @memberof AppMultipleSelect
   */
  @Prop()  public options?:any;
  
 /**
   * 当前选中值
   *
   * @type {string[]}
   * @memberof AppMultipleSelect
   */
  @Prop() public value?: any;

  /**
   * 模式的类型
   *
   * @type {string}
   * @memberof AppMultipleSelect
   */
  @Prop({ default: "str" }) public orMode?: string;

  /**
   * 数据存储分隔符
   *
   * @type {string}
   * @memberof AppMultipleSelect
   */
  @Prop({ default: "," }) public valueSeparator?: string;

  /**
   * 数据显示分隔符
   *
   * @type {string}
   * @memberof AppMultipleSelect
   */
  @Prop({ default: "," }) public textSeparator?: string;

  get curValue() {
    if (this.value) {
      this.selectedValues = this.value;
      if (this.orMode === "num") {
        const temp:Array<any> = [];
        this.options.forEach((val:any) => {
          if ((this.value & val.value) == val.value) {
            temp.push(val.value);
          }
        });
        return temp;
      } else {
        return this.value.split(this.valueSeparator);
      }
    } else {
      return [];
    }
  }

  set curValue(val: any) {
    this.getSelectedValues(val);
    this.$emit("valuechange", this.selectedValues);
  }

  /**
	 * 选中数据值
	 *
	 * @private
	 * @type any
	 * @memberof AppMultipleSelect
	 */
   public selectedValues: any;

  /**
   * 获取选择的实际值和文本值
   *
   * @param {any[]} arr
   * @memberof AppMultipleSelect
   */
  public getSelectedValues(arr: any[]) {
      let num = 0;
      let str = '';
      arr.forEach(val => {
          const element = this.options.find((item:any) => Object.is(item.value, val));
          if (element) {
              if (this.orMode === 'num') {
                  num = num | parseInt(val, 10);
              } else {
                  if (str) {
                      str += this.valueSeparator;
                  }
                  str += element.value;
              }
          }
      });
      this.selectedValues = this.orMode === 'num' ? (num !== 0 ? num.toString() : '') : str;
  }
}
</script>
<style lang="less">
</style>